# Component: PDF Viewer

Interactive canvas-based document renderer with pagination

Media Block

### BEM Anatomy

| Type      | Class Name          | Description                                                                                                        |
| --------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-pdf-viewer`    | The core wrapper. Contains both the interactive control bar and the rendering canvas.                              |
| Element   | `__controls`        | A flexbox utility bar. Centrally aligns navigation buttons and page numbering.                                     |
| Element   | `__pages`           | Container for the current/total page count strings with standardized horizontal margins.                           |
| Element   | `__download-button` | Wrapper for the external `DownloadButton` component, positioned to the right of controls.                          |
| Element   | `__button`          | Navigation buttons                                                                                                 |
| Modifier  | `--prev`            | Contextual identifier for the "Previous Page" button; often includes a left-facing chevron.                        |
| Modifier  | `--next`            | Contextual identifier for the "Next Page" button; often includes a right-facing chevron.                           |
| Element   | `__pages`           | Container for the page count display. Uses standardized horizontal margins to separate it from navigation buttons. |
| Element   | `__current-page`    | The indicator or input field showing the specific page currently in view.                                          |
| Element   | `__of-page`         | A decorative or static text element (usually "/") separating current and total page counts.                        |
| Element   | `__total-page`      | The static indicator showing the total number of pages in the loaded document.                                     |

### Conditional Pagination

The control bar is conditionally rendered: it only appears if `TotalPages` is greater than 1. The viewer uses a `<canvas>` element with a unique ID for JavaScript-driven PDF rendering, ensuring high-fidelity document display without browser plugins.

##### Generated HTML (Multi-page document)

```html
<div class="as-pdf-viewer">
    <div class="as-pdf-viewer__controls">
        <button class="as-pdf-viewer__button as-pdf-viewer__button--prev btn btn-link">
            <i class="fa-solid fa-angle-left"></i>
        </button>
        <span class="as-pdf-viewer__pages">
            <span class="as-pdf-viewer__current-page">1</span>
            <span class="as-pdf-viewer__of-page">/</span>
            <span class="as-pdf-viewer__total-page">12</span>
        </span>
        <button class="as-pdf-viewer__button as-pdf-viewer__button--next btn btn-link">
            <i class="fa-solid fa-angle-right"></i>
        </button>
    </div>
    <canvas id="pdf-canvas-unique-id" class="as-module__preview"></canvas>
</div>
```

##### SCSS

```scss
.as-pdf-viewer {
  &__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
  }

  &__pages {
    // Spacing between buttons and text
    margin-right: 1rem;
    margin-left: 1rem;
  }
  
  &__download-button {
    // Offset the download action
    margin-left: 1rem;
  }
}
```
